<h3>描述</h3>
<p>开发者可结合数据利用表格dom结构和ticheckgroup组件来实现的复选树表，具体可参考tiCheckgroup组件的使用说明。</p>
<p>不建议分页，父子关系会有影响</p>
<p class="demo-text-warn">注意：使用 TiIcon 组件，请导入 TiIconModule；使用 tiCheckgroup 组件，请导入 TiCheckboxModule</p>
<h3>示例</h3>

<ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
  <table>
    <thead>
      <tr>
        <!--使用复选框时，需要给复选框列加 checkbox-column 属性-->
        <th checkbox-column>
          <!--全选按钮-->
          <!--如果有分页，全选需要控制当前页时，items接口传入displayed
                        如果全选要控制表格所有数据，items接口传入srcData.data-->
          <input
            type="checkbox"
            tiCheckgroup
            [items]="getItems(srcData.data)"
            [(checkeds)]="checkedList"
            (checkedsChange)="onMyChange($event)"
          />
        </th>
        <th *ngFor="let column of columns">{{column.title}}</th>
      </tr>
    </thead>
    <tbody>
      <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
      <ng-container *ngFor="let you of srcData.data; let i = index"
        ><!--第一级-->
        <tr [ngClass]="{'ti3-selected-tr': checkedList.indexOf(you) !== -1}">
          <td checkbox-column>
            <input type="checkbox" tiCheckgroup [items]="getItems(you.subData, you)" [(checkeds)]="youCheckedList" />
          </td>
          <td>
            <span class="ti3-table-tree" (click)="you.showSub = !you.showSub" [hidden]="!you.subData">
              <ti-icon [name]="you.showSub?'minus-square':'plus-square'"></ti-icon>
            </span>
            <span [ngClass]="{'ti3-table-tree-no-leaf': !you.subData}">{{you.name}}</span>
          </td>
          <td>{{you.size}}</td>
          <td>{{you.type}}</td>
        </tr>
        <ng-container *ngFor="let son of you.subData"
          ><!--第二级-->
          <tr [hidden]="!you.showSub" [ngClass]="{'ti3-selected-tr': checkedList.indexOf(son) !== -1}">
            <td checkbox-column>
              <input type="checkbox" tiCheckgroup [items]="getItems(son.subData, son)" [(checkeds)]="sonCheckedList" />
            </td>
            <td style="padding-left: 34px">
              <span class="ti3-table-tree" (click)="son.showSub = !son.showSub" [hidden]="!son.subData">
                <ti-icon [name]="son.showSub?'minus-square':'plus-square'"></ti-icon>
              </span>
              <span [ngClass]="{'ti3-table-tree-no-leaf': !son.subData}">{{son.name}}</span>
            </td>
            <td>{{son.size}}</td>
            <td>{{son.type}}</td>
          </tr>
          <ng-container *ngFor="let grandson of son.subData"
            ><!--第三级-->
            <tr [hidden]="!(you.showSub && son.showSub)" [ngClass]="{'ti3-selected-tr': checkedList.indexOf(grandson) !== -1}">
              <td checkbox-column>
                <input type="checkbox" tiCheckitem [item]="grandson" />
              </td>
              <td style="padding-left: 58px">
                <span [ngClass]="{'ti3-table-tree-no-leaf': !grandson.subData}">{{grandson.name}}</span>
              </td>
              <td>{{grandson.size}}</td>
              <td>{{grandson.type}}</td>
            </tr>
          </ng-container>
        </ng-container>
      </ng-container>
    </tbody>
  </table>
</ti-table>
